<template>
    <div class="table-body-container layout-padding">
        <el-card shadow="hover" class="layout-padding-auto">
            <div class="test-school-search mb15">
                <el-input size="default" v-model="state.tableData.param.label" placeholder="请输入学校名称" style="max-width: 180px"> </el-input>
                <el-button size="default" @click="getTableData" type="primary" class="ml10">
                    <el-icon>
                        <ele-Search />
                    </el-icon>
                    查询
                </el-button>
                <el-button size="default" type="success" class="ml10" @click="onOpenAdd(state.add)">
                    <el-icon>
                        <ele-FolderAdd />
                    </el-icon>
                    新增学校
                </el-button>
            </div>
            <el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
                <el-table-column prop="deptId" label="部门id" show-overflow-tooltip></el-table-column>
                <el-table-column prop="username" label="用户名" show-overflow-tooltip></el-table-column>
                <el-table-column prop="password" label="密码" show-overflow-tooltip></el-table-column>
                <el-table-column prop="nickName" label="用户昵称" show-overflow-tooltip></el-table-column>
                <el-table-column prop="type" label="用户类型（0、管理员；1、普通用户）" show-overflow-tooltip></el-table-column>
                <el-table-column prop="email" label="用户邮箱" show-overflow-tooltip></el-table-column>
                <el-table-column prop="phone" label="手机号码" show-overflow-tooltip></el-table-column>
                <el-table-column prop="sex" label="性别（0、男；1、女）" show-overflow-tooltip></el-table-column>
                <el-table-column prop="avatarPath" label="头像" show-overflow-tooltip></el-table-column>
                <el-table-column prop="status" label="帐号状态（0、正常；1、禁用）" show-overflow-tooltip></el-table-column>
                <el-table-column prop="remark" label="备注" show-overflow-tooltip></el-table-column>
                <el-table-column label="操作" width="100">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="onOpenEdit(state.edit, scope.row)">修改</el-button>
                        <el-button size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="onHandleSizeChange"
                    @current-change="onHandleCurrentChange"
                    class="mt15"
                    :pager-count="5"
                    :page-sizes="[10, 20, 30]"
                    v-model:current-page="state.tableData.param.current"
                    background
                    v-model:page-size="state.tableData.param.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="state.tableData.total"
            >
            </el-pagination>
        </el-card>
        <DicDialog ref="dicDialogRef" @refresh="getTableData()" />
    </div>
</template>

<script setup lang="ts" name="testDic">
    import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
    import { ElMessageBox } from 'element-plus';
    import { schoolApi } from '/@/api/test/school';
    import constConfig from '/@/utils/constConfig';

    // 引入组件
    const DicDialog = defineAsyncComponent(() => import('/@/views/test/school/dialog.vue'));

    // 定义变量内容
    const dicDialogRef = ref();
    const state = reactive({
        tableData: {
            data: [],
            total: 0,
            loading: false,
            param: {
                label:'',
                ...constConfig.pageModel,
            },
        },
        formData: {
            label: '',
            value: '',
            status: '0',
            type:'',
            typeCn: '', // 字典描述
            sort: 50
        },
        ...constConfig.dialogType
    });

    // 初始化表格数据
    const getTableData = () => {
        state.tableData.loading = true;
        schoolApi().page(state.tableData.param).then(res=>{
            state.tableData.data = res.data.records??[];
            state.tableData.total = res.data.total;
            state.tableData.loading = false;
        })
    };
    // 打开新增字典弹窗
    const onOpenAdd = (type: string) => {
        let row = JSON.parse(JSON.stringify(state.formData));
        dicDialogRef.value.openDialog(type, row);
    };
    // 打开修改字典弹窗
    const onOpenEdit = (type: string, row: SchoolType) => {
        row = JSON.parse(JSON.stringify(row))
        dicDialogRef.value.openDialog(type, row);
    };
    // 删除字典
    const onRowDel = (row: SchoolType) => {
        ElMessageBox.confirm(`${constConfig.delString.tip1 + row.label + constConfig.delString.tip2}`, '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            schoolApi().del(row.id).then(() => {
                getTableData();
            })
        })
            .catch(() => {});
    };
    // 分页改变
    const onHandleSizeChange = (val: number) => {
        state.tableData.param.size = val;
        getTableData();
    };
    // 分页改变
    const onHandleCurrentChange = (val: number) => {
        state.tableData.param.current = val;
        getTableData();
    };
    // 页面加载时
    onMounted(() => {
        getTableData();
    });
</script>
<style scoped lang="scss">
    .table-body-container {
    :deep(.el-card__body) {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: auto;
    .el-table {
        flex: 1;
    }
    }
    }
</style>